<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蜗牛家居-首页</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <header>
      <div class="head">
        <div class="logo">
          <a href="./index.html" class="link_a">
            <img src="./images/logo.png" alt="" />
          </a>
        </div>
        <!--个人信息 -->
        <div class="user_info">
          <div class="link">
            <span><a class="link_a" href="./login.html">登录</a></span>
            <span>|</span>
            <span><a class="link_a" href="./regesiter.html">注册</a></span>
          </div>
          <div class="search">
            <input type="text" placeholder="热门搜索：干花花瓶" />
            <a class="link_a" href=""><button></button></a>
          </div>
          <div class="icon">
            <a href="./usercenter.html" class="link_a">
              <img src="./images/grzx.png" alt="" />
            </a>
            <a href="" class="link_a">
              <img src="./images/ewm.png" alt="" />
              <div class="ewm_icon_pic_none">
                <img src="./images/smewm.png" alt="">
              </div>
            </a>
            <a href="./cart.html" class="link_a">
              <img src="./images/gwc.png" alt="" />
            </a>
          </div>
        </div>
      </div>
      <!-- 导航 -->
      <nav>

    <!-- 电梯导航 -->
    <div class="goTop">
      <!-- 第一个 -->
      <div>
        <div class="goPay">
            <div>去购</div>
            <div>物车</div>
        </div>
      </div>
      <!-- 第一个 -->
      <!-- 第二个 -->
      <div>
          <div>
            联系客服
          </div>
      </div>
      <!-- 第二个 -->
      <!-- 第三个 -->
      <div>
          <div>
            <a href="usercenter.html">个人中心</a>
          </div>
      </div>
      <!-- 第三个 -->
      <!-- 第四个 -->
      <div>
        <div>
          返回顶部
        </div>
      </div>
      <!-- 第四个 -->
    </div>
    <!-- 电梯导航 -->
        <!-- <div class="navigation">

          </div> -->
        <div class="navigation">
          <a href="" class="link_a">首页</a>
          <a href="" class="link_a" name="all">
            所有商品
            <!-- 根据nav定位 -->
            <div class="all_product">
              <!-- 全部商品 漂浮 -->
              <div class="center">

                <div class="product_item">
                  <div>
                    <img src="./images/nav1.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav5.jpg" alt="">
                  </div>
                  <div>浪漫美式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav6.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav7.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav8.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
              </div>
              <!-- 全部商品 漂浮 -->
            </div>
          </a>
          <a href="" class="link_a" name="accessories">
            装饰配件  
             <!-- 样式  -->
            <div class="css">
              <div class="center">
                <span>干花花艺</span>
                <span>花瓶花艺</span>
              </div>
            </div>     
          </a>
             <!-- 样式  --> 
          
          <a href="" class="link_a" name="decorations">
            布艺软饰
            <div class="decorations">
              <div class="content">
                <span>桌布罩件</span>
                <span>抱枕靠枕</span>
              </div>
            </div>   
          </a>
          <a href="./paint.html" class="link_a">墙饰壁挂</a>
          <a href="" class="link_a">蜡艺香薰</a>
          <a href="" class="link_a">创意家居</a>
        </div>
      </nav>
      <!-- 导航 -->
    </header>

    
    <div class="banner">
      <div class="banner_son">
        <img src="./images/banner1.jpg" alt="">
        <img src="./images/banner2.jpg" alt="">
        <img src="./images/banner3.jpg" alt="">
        <img src="./images/banner1.jpg" alt="">
      </div>
    </div>
    <div class="category">
      <div class="item1">
        <img src="./images/i1.jpg" alt="" />
      </div>
      <div class="item2">
        <img src="./images/i2.jpg" alt="" />
      </div>
      <div class="item3">
        <img src="./images/i3.jpg" alt="" />
      </div>
    </div>
    <div class="goods">
      <div class="title">
        <img src="./images/ih3.jpg" alt="" />
      </div>
      <!-- 所有的商品展示 -->
      <div class="items">
        <div class="item">
          <a href="">
            <img src="./images/s7.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s8.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s9.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s10.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s11.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s12.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s1.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s2.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s3.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s4.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s5.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
        <div class="item">
          <a href="">
            <img src="./images/s6.jpg" alt="" />
            <div class="name">【最家】不锈钢壁饰墙饰软装</div>
            <div class="pric">￥688.00</div>
          </a>
        </div>
      </div>
      <!-- 所有的商品展示 -->
    </div>
    <!-- 页脚 -->
    <footer>
      <div class="promise">
        <div class="promiser">
          <a href="" class="link_a">
            <img class="margin" src="./images/foot1.png" alt="" />
          </a>
          <div>7天无理由退货</div>
        </div>
        <div class="promiser">
          <a href="" class="link_a">
            <img class="margin" src="./images/foot2.png" alt="" />
          </a>
          <div>15天免费换货</div>
        </div>
        <div class="promiser">
          <a href="" class="link_a">
            <img class="margin" src="./images/foot3.png" alt="" />
          </a>
          <div>满599包邮</div>
        </div>
        <div class="promiser">
          <a href="" class="link_a">
            <img class="margin" src="./images/foot4.png" alt="" />
          </a>
          <div>手机特色服务</div>
        </div>
      </div>
      <div class="copyright">
        蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号<br />
        违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
      </div>
    </footer>
<!--    <div class="returnTop">-->
<!--      <div style="margin-top: 10px">返回</div>-->
<!--      <div>顶部</div>-->
<!--    </div>-->
    <!-- 页脚 -->
    <!-- js -->
    <script>
      // const returnTop = document.querySelector(".returnTop");
      // returnTop.addEventListener("click", function (e) {
      //   // 将scroll的值设为0
      //   document.documentElement.scrollTop = 0;
      // });

      // 悬浮 显示二维码 js

     //  // 定义悬浮的这个a链接
     //       const hover_ewm = document.querySelector("header .head .user_info .icon a:nth-child(2) ")
      const hover_ewm = document.querySelector("header .head .user_info .icon a:nth-child(2) ")
      // 定义下面的二维码图片r .head .user_info .i
      const ewm_icon = document.querySelector("header .head .user_info .icon a:nth-child(2) .ewm_icon_pic_none")
      // 悬浮上面图片显示
      hover_ewm.addEventListener("mouseover",function(){
        ewm_icon.style="display: block;"
      })
     // 悬浮离开图片没有
     hover_ewm.addEventListener("mouseout",function(){
        ewm_icon.style="display: none;"
      })

      // 悬浮 显示二维码  js


      // 顶部在超过scollTop里面就开始透明
         //  定义这个头部
      const head = document.querySelector("header .head")
      window.addEventListener("scroll",function () {
        if (document.documentElement.scrollTop >= 76) {
          head.classList.add("ding")
        }
        else {
          head.classList.remove("ding")
        }
      })



      // 点击返回网页头部返回网页头部

      const go_top = document.querySelector(".goTop div:nth-child(4)")
      go_top.addEventListener("click",function(){
        document.documentElement.scrollTop = 0;
      })
      // 点击返回网页头部返回网页头部


    //  页面滚动事件  当滚动鼓励大于624的时候显示侧边栏
    //  定义这个侧边连
      const right_side = document.querySelector(".goTop")
      window.addEventListener('scroll',function () {
      //  如果html元素滚动大于等于300，则显示侧边栏，否则隐藏
      //   console.log(document.documentElement.scrollTop )
        //
        const n = document.documentElement.scrollTop
        // if (n >= 624) {
        //   go_top.style.opacity = 1;
        // }
        // else {
        //   go_top.style.opacity = 0;
        // }
        go_top.style.opacity = n >= 624 ? 1 : 0
      })
    </script>
  </body>
</html>
